<template>
  <div class="container">
    <p class="title">顺序编排学校</p>
    <step index="0"></step>
    <el-form ref="form" :model="manuallInfo" label-width="120px" v-loading="loading" class="c-form">
      <el-form-item label="考点选择：">
        <el-select v-model="manuallInfo.pointName" style="width:400px" placeholder="请选择考点" @change="manuallyInit">
          <el-option
              v-for="item in pointList"
              :key="item.id"
              :label="item.areaName"
              :value="item.id">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考场个数：">
        <el-input style="width:400px" v-model="manuallInfo.roomNum" disabled></el-input>
      </el-form-item>
      <el-form-item label="考试时间：">
        <div style="width:400px;">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="manuallInfo.beginDate" style="width: 100%;" disabled></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align:center;">-</el-col>
          <el-col :span="11">
            <!-- <el-time-picker type="fixed-time" placeholder="选择时间" v-model="manuallInfo.date2" style="width: 100%;"></el-time-picker> -->
            <el-date-picker type="date" placeholder="选择日期" v-model="manuallInfo.endDate" style="width: 100%;" disabled></el-date-picker>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item label="剩余座位数：">
        <el-input style="width:400px;" v-model="manuallInfo.totalSeat" disabled></el-input>
      </el-form-item>
      <el-form-item label="学校选择：">
        <div class="clearfix">
          <div class="school-item" :class="{'checked': sch.checked}" v-for="(sch, idx) in manuallInfo.schoolData" :key="idx" @click="checkedSchool(idx, sch, sch.checked)">
            <p class="school">{{sch.schoolName}}</p>
            <div class="info">
              <p>距离：{{sch.distance}}米</p>
              <p>人数：{{sch.stuNum}}人</p>
            </div>
            <i class="el-icon-circle-check"></i>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <span class="fuzhu"></span>
    <div class="btn">
      <a href="javascript:;" class="save" @click="saveManuallyInit()">下一步</a>
      <a href="javascript:;" @click="$router.push({name: 'sequenceSchool'})" class="cancel">取消</a>
    </div>
  </div>
</template>

<script>
import step from '@/components/step.vue'
export default {
  components: {
    step
  },
  data () {
    return {
      manuallInfo: {
        pointName: null,
        stuNum: null,
        beginDate: null,
        endDate: null,
        totalSeat: null,
        schoolData: []
      },
      loading: false,
      pointList: [],
      pointId: null
    }
  },
  created () {
    this.getPoints()
  },
  methods: {
    getPoints () {
      let that = this
      that.$http.getOrganizePoints().then(res => {
        if (res.code === 20000) {
          that.pointList = res.data
        } else {
          that.$message.error('暂无考点信息')
        }
      })
    },
    // 人工编排初始化
    manuallyInit (val) {
      let that = this
      that.pointId = val
      that.loading = true
      that.$http.manuallyInit({ pointId: that.pointId }).then(res => {
        if (res.status === '20000') {
          that.manuallInfo = res
          if (that.manuallInfo.schoolData && that.manuallInfo.schoolData.length) {
            that.manuallInfo.schoolData = that.manuallInfo.schoolData.map(item => {
              let _item = item
              _item.checked = false
              return _item
            })
            // that.manuallInfo.schoolData.unshift({
            //   stuNum: res.stuNum,
            //   schoolName: res.pointName,
            //   id: res.id,
            //   distance: 0
            // })
          } else {
            that.$message.error('该考点下暂无编排学校')
          }
        } else {
          that.$message.error(res.msg)
        }
        that.loading = false
      })
    },
    // 选择学校
    checkedSchool (idx, item, val) {
      item.checked = !val
      this.$set(this.manuallInfo.schoolData, idx, item)
    },
    // 下一步
    saveManuallyInit () {
      let that = this
      let _schoolIds = []
      this.manuallInfo.schoolData.map(item => {
        if (item.checked) {
          _schoolIds.push(item.id)
        }
      })
      if (!_schoolIds.length) {
        that.$message.error('请选择学校')
        return false
      }
      that.$http.manuallyOrder({ pointId: that.pointId, schoolIds: _schoolIds }).then(res => {
        if (res.status === '200' || res.status === '20000') {
          sessionStorage.setItem('manually', JSON.stringify(res))
          this.$router.push({ name: 'sequenceSchoolStep2' })
        } else {
          that.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
.school-item
  width 174px
  height 120px
  border 1px solid #ccc
  border-radius 5px
  margin-bottom 20px
  position relative
  margin-right 20px
  float left
  cursor pointer
  &:hover
    border-color #3F82FF
  &.checked
    border-color #3F82FF
    i
      display block
  .school
    padding-left 20px
    margin-top 10px
  .info
    position absolute
    bottom 14px
    p
      padding-left 20px
      line-height 20px
  i
    position absolute
    right 20px
    bottom 20px
    color color
    font-size 20px
    display none
  &.active
    border 1px solid color
.fuzhu
  top 0
  margin-bottom 20px
.btn
  a
    display inline-block
    width 70px
    height 38px
    text-align center
    line-height 38px
    border-radius 5px
    color #fff
    text-decoration none
    margin-right 14px
    &.save
      background color
    &.cancel
      color color
      border 1px solid color
</style>
